<template>
  <div class="dispose-statistics">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form ref="formRef" :model="params" label-width="auto">
          <el-row :gutter="120">
            <el-col :span="5">
              <el-form-item label="行政区划：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="危废类别：">
                <el-select
                  v-model="params.wastetype"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in wasteList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="开始日期：">
                <el-date-picker
                  v-model="params.startdate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="结束日期：">
                <el-date-picker
                  v-model="params.enddate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="main-waste">
      <div class="line-chart">
        <div class="hazardous-wastes-num">
          <div class="hazardous-wastes-num-title">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            主要危废处置
          </div>
          <div class="content-wrap">
            <div class="left-pie">
              <MainWasteDisposePie :wasteFirst="wasteFirst" />
            </div>
            <div class="data-list">
              <h3>危废处置量前五</h3>
              <ul>
                <li v-for="(item, index) in wasteFirst" :key="index">
                  <div class="order">{{ index + 1 }}</div>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.enterpriseName"
                    placement="top-start"
                  >
                    <div class="name">{{ item.enterpriseName }}</div>
                  </el-tooltip>

                  <div class="val">{{ item.wasteNum }}吨</div>
                  <div class="proportion">{{ item.percent }}%</div>
                </li>
                <!-- <li>
                  <div class="order">2</div>
                  <div class="name">hw31...</div>
                  <div class="val">3.35万吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">3</div>
                  <div class="name">hw31...</div>
                  <div class="val">3.35万吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">4</div>
                  <div class="name">hw23...</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">5</div>
                  <div class="name">hw23...</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">6</div>
                  <div class="name">其他</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li> -->
              </ul>
            </div>
          </div>
        </div>
        <div class="city-wastes-num">
          <div class="city-wastes-num-title">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            经营企业处置量
          </div>
          <div class="chart-wrap">
            <div class="data-name">
              <div class="left">
                经营企业总数&nbsp<span>{{ dataNum.num_enterprisethird }}</span>
              </div>
              <div class="right">
                经营企业处置量&nbsp;
                <span>{{ dataNum.num_wastedispose_sum }}&nbsp;</span>(吨)
              </div>
            </div>
            <EnterpriseDisposeNum :disposeData="disposeData" />
          </div>
        </div>
      </div>
      <div class="line-chart">
        <div class="hazardous-wastes-num">
          <div class="hazardous-wastes-num-title">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            次生危废产生
          </div>
          <div class="content-wrap">
            <div class="left-pie">
              <WasteProducePie :wasteSecond="wasteSecond" />
            </div>
            <div class="data-list">
              <h3>危废产生量前五</h3>
              <ul>
                <li v-for="(item, index) in wasteSecond" :key="index">
                  <div class="order">{{ index + 1 }}</div>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.enterpriseName"
                    placement="top-start"
                  >
                    <div class="name">{{ item.enterpriseName }}</div>
                  </el-tooltip>

                  <div class="val">{{ item.wasteNum }}吨</div>
                  <div class="proportion">{{ item.percent }}%</div>
                </li>
                <!-- <li>
                  <div class="order">2</div>
                  <div class="name">hw31...</div>
                  <div class="val">3.35万吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">3</div>
                  <div class="name">hw31...</div>
                  <div class="val">3.35万吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">4</div>
                  <div class="name">hw23...</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">5</div>
                  <div class="name">hw23...</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">6</div>
                  <div class="name">其他</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li> -->
              </ul>
            </div>
          </div>
        </div>
        <div class="city-wastes-num">
          <div class="city-wastes-num-title">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            全市次生危废地区分布
          </div>
          <div class="content-wrap">
            <div class="left-pie">
              <CityWastehistogram :areaData="areaData" />
            </div>
            <div class="data-list">
              <h3>危废产生量前五</h3>
              <ul>
                <li v-for="(item, index) in areaData" :key="index">
                  <div class="order">{{ index + 1 }}</div>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.enterpriseName"
                    placement="top-start"
                  >
                    <div class="name">{{ item.enterpriseName }}</div>
                  </el-tooltip>

                  <div class="val">{{ item.wasteNum }}吨</div>
                  <div class="proportion">{{ item.percent }}%</div>
                </li>
                <!-- <li>
                  <div class="order">2</div>
                  <div class="name">中原区</div>
                  <div class="val">3.35万吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">3</div>
                  <div class="name">金水区</div>
                  <div class="val">3.35万吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">4</div>
                  <div class="name">二七区</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">5</div>
                  <div class="name">管城区</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li>
                <li>
                  <div class="order">6</div>
                  <div class="name">其他</div>
                  <div class="val">9234.79吨</div>
                  <div class="proportion">28.93%</div>
                </li> -->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import http from "@http";
import ElMessage from "@msg";
import changeArea from "@/utils/changeArea.js";
import EnterpriseDisposeNum from "./enterpriseDisposeNum"; //经营企业处置量
import MainWasteDisposePie from "./mainWasteDisposePie"; //主要危废处置
import WasteProducePie from "./wasteProducePie"; //次生危废产生
import CityWastehistogram from "./cityWastehistogram"; //全市次生危废地区分布
let params = reactive({});
let adminAreaList = ref([]);
let wasteList = ref([]);
let dataNum = ref([]);
let areaData = ref([]);
let disposeData = ref({});
let form = reactive({});
let wasteFirst = ref([]);
let wasteSecond = ref([]);
let handleSearch = () => {};
http({ url: "/region/datalisttree" }).then((res) => {

  if (res.code == 0) {
    adminAreaList.value = changeArea(res.data);
  }
});
let getList = () => {
  http({ url: "/admPCGraphWasteDisposeSum/getGraphData", data: params }).then(
    (res) => {
      if (res.code == 0) {
        disposeData.value.x = res.data.dispose_data_x;
        disposeData.value.y = res.data.dispose_data_y;

        wasteFirst.value = res.data.fan_data_waste_first;
        wasteSecond.value = res.data.fan_data_waste_second;
        areaData.value = res.data.area_stock_top5;
        dataNum.value = {
          num_enterprisethird: res.data.num_enterprisethird,
          num_wastedispose_sum: res.data.num_wastedispose_sum,
        };
        ElMessage({ msg: "查询成功" });
      }
    }
  );
};
getList();
http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
  if (res.code == 0) {
    wasteList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
.dispose-statistics {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .title-wrap {
    height: 140px;
    background: #ffffff;
    padding-top: 20px;

    .search-wrap {
      margin-top: 30px;
      padding-left: 20px;

      :deep(.el-input) {
        width: 220px !important;
      }
    }
  }

  .main-waste {
    width: 100%;
    margin-top: 0.2vh;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    .line-chart {
      margin-top: 0.7vh;
      display: flex;
      justify-content: space-between;
      .hazardous-wastes-num,
      .city-wastes-num {
        /* margin-top: 0.5vh; */
        height: calc(37vh);
        width: 807px;
        background-color: #fff;
        padding-top: 18px;
        padding-left: 18px;
        .chart-wrap {
          position: relative;
          .data-name {
            top: -3px;
            left: 60px;
            position: absolute;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            .left,
            .right {
              display: flex;
              align-items: center;
            }
            span {
              font-weight: 400;
              font-size: 25px;
              color: #333333;
            }
          }
        }
        .content-wrap {
          display: flex;
          justify-content: space-between;

          padding-right: 45px;
          .left-pie {
            width: 450px;
          }
          .data-list {
            padding-top: 15px;
            border-radius: 10px;
            width: 232px;
            ul {
              display: flex;
              flex-direction: column;
            }
            ul > li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 2.5vh;
              .order {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #333333;
              }
              .name {
                max-width: 70px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #a3bad0;
                margin-left: 10px;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-align: center;
                text-overflow: ellipsis;
              }
              .val {
                width: 90px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #333333;
                white-space: nowrap;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                flex-shrink: 0;
              }
              .proportion {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #333333;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            h3 {
              padding: 5px 0;
              border-radius: 10px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 17px;
              color: #0874fa;
              background-color: #cee3fe;
              text-align: center;
            }
          }
        }
        .hazardous-wastes-num-title {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
          img {
            width: 27px;
            height: 20px;
          }
        }
      }
      .city-wastes-num {
        height: calc(37vh);
        width: 807px;
        padding-top: 18px;
        padding-left: 18px;
        background-color: #fff;
        .chart-wrap {
          position: relative;
          .right {
            margin-left: 60px;
          }
          .data-name {
            top: -5px;
            left: 60px;
            position: absolute;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            display: flex;
            .left,
            .right {
              font-weight: 400;
              font-size: 18px;
              color: #333333;

              span {
                font-family: SeoulNamsan EB;
                font-weight: 400;
                font-size: 25px;
                color: #333333;
              }
            }
          }
        }
        .city-wastes-num-title {
          display: flex;
          align-items: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
          img {
            width: 27px;
            height: 20px;
            margin-right: 12px;
          }
        }
      }
    }
  }
}
</style>
